<template>
  <a-modal
    width="770px"
    v-model="modalVisible"
    :bodyStyle="bodyStyle"
    :destroyOnClose="true"
    :maskClosable="false"
    :title="title"
    @cancel="cancel"
  >
    <template slot="footer">
      <a-button key="back" @click="cancel" :disabled="loading"> 取消 </a-button>
      <a-button key="submit" @click="save" type="primary" :loading="loading">
        确定
      </a-button>
    </template>
    <a-spin :spinning="user.spinning">
      <a-row>
        <a-col :span="8" style="width: 250px">
          <a-card class="eip-admin-card-small" size="small">
            <div slot="title" style="height:32px;line-height:32px">
              组织架构
            </div>
            <a-directory-tree
              :style="tree.style"
              :tree-data="data"
              :icon="treeIcon"
              @select="treeSelect"
            >
            </a-directory-tree>
          </a-card>
        </a-col>

        <a-col :span="15" style="margin-left: 3px; width: 508px">
          <a-card class="eip-admin-card-small" size="small">
            <div slot="title">{{ user.org }}人员</div>
            <div slot="extra">
              <a-space>
                <a-input-search
                  v-model="user.key"
                  placeholder="帐号/姓名模糊查询..."
                  style="width: 150px"
                />
                <a-button type="primary" @click="userAll"
                  ><a-icon type="user" />查看所有人员</a-button
                ></a-space
              >
            </div>

            <div class="scrollBar">
              <ul id="accessButton" class="sys_spec_text">
                <li
                  v-for="(user, i) in users"
                  :key="i"
                  :class="user.exist ? 'selected' : ''"
                  @click="userCheck(user)"
                >
                  <a-tooltip>
                    <template slot="title">
                      {{ user.name + "-" + user.parentIdsName }}
                    </template>
                    <a><a-icon type="user" /> {{ user.name }}</a>
                  </a-tooltip>
                  <i class="check"></i>
                </li>
              </ul>
            </div>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </a-modal>
</template>

<script>
import { chosenuser, save } from "@/services/common/usercontrol/chosenuser";
export default {
  name: "eip-chosen-user",
  data() {
    return {
      bodyStyle: {
        padding: "4px",
        "background-color": "#f0f2f5",
      },
      tree: {
        style: {
          overflow: "auto",
          height: "300px",
        },
        data: [],
        loading: true,
        right: {
          item: null,
          style: "",
        },
      },
      user: {
        org: "",
        data: [],
        key: "",
        orgId: "",
        spinning: false,
      },
      param: {
        privilegeMaster: "",
        privilegeMasterValue: "",
        privilegeMasterUser: "",
      },
      modalVisible: this.visible,
      loading: false,
    };
  },
  computed: {
    users() {
      var arr = [];
      this.user.data.forEach((item) => arr.push(item));
      if (this.user.key) {
        arr = this.user.data.filter((item) =>
          item.name.includes(this.user.key)
        );
      }
      if (this.user.orgId) {
        arr = this.user.data.filter((item) =>
          item.organizationId.includes(this.user.orgId)
        );
      }
      if (this.user.key && this.user.orgId) {
        arr = this.user.data.filter(
          (item) =>
            item.name.includes(this.user.key) &&
            item.organizationId.includes(this.user.orgId)
        );
      }
      return arr;
    },
  },
  watch: {
    visible(val) {
      this.modalVisible = val;
    },
  },

  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
    },
    title: {
      type: String,
    },
  },

  methods: {
    /**
     * 树图标
     */
    treeIcon(props) {
      const { expanded } = props;
      if (props.children.length == 0) {
        return <a-icon type="file" />;
      }
      return <a-icon type={expanded ? "folder-open" : "folder"} />;
    },

    /**
     * 树选中
     */
    treeSelect(electedKeys, e) {
      this.user.orgId = electedKeys[0];
      this.user.org = e.selectedNodes[0].title;
    },
    /**
     * 取消
     */
    cancel() {
      this.user.org = "";
      this.user.data = [];
      this.$emit("close");
    },

    /**
     * 初始化人员
     */
    userInit(privilegeMaster, privilegeMasterValue) {
      let _this = this;
      _this.user.spinning = true;
      _this.param.privilegeMaster = privilegeMaster;
      _this.param.privilegeMasterValue = privilegeMasterValue;
      chosenuser(privilegeMaster, privilegeMasterValue).then((result) => {
        _this.user.data = result.data;
        _this.user.spinning = false;
      });
    },

    /**
     * 所有用户
     */
    userAll() {
      this.user.key = "";
      this.user.orgId = "";
      this.user.org = "所有";
    },

    /**
     * 用户选择
     */
    userCheck(user) {
      user.exist = !user.exist;
    },

    /**
     * 保存
     */
    save() {
      let _this = this;
      let exist = this.user.data.filter((f) => f.exist);
      let privilegeMasterUser = [];
      exist.forEach((item) => {
        privilegeMasterUser.push({ u: item.userId });
      });
      _this.param.privilegeMasterUser = JSON.stringify(privilegeMasterUser);
      _this.loading = true;
      save(_this.param).then((result) => {
        if (result.code === _this.$resultCode.success) {
          _this.$message.success(result.msg);
          _this.cancel();
        } else {
          _this.$message.error(result.msg);
        }
        _this.loading = false;
      });
    },
  },
};
</script>

<style lang="less" scoped>
/*自定义复选框*/
.scrollBar {
  overflow: auto;
  height: 297px;
}

.sys_spec_text {
  padding-left: 15px;
}

.sys_spec_text li {
  display: inline;
  float: left;
  height: 43px;
  margin: 10px 15px 0px 0;
  outline: none;
  outline: none;
  position: relative;
  position: relative;
}

.sys_spec_text li a {
  background: #fff;
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  line-height: 39px;
  outline: none;
  overflow: hidden;
  padding: 0px 0px;
  text-align: center;
  text-align: center;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
  width: 98px;
  word-break: keep-all;
  color: black;
}

.sys_spec_text li a:hover {
  border: 1px solid #4a5b79;
  padding: 0 0px;
  text-decoration: none;
}

.sys_spec_text li .check {
  background: url(images/selected.gif) no-repeat right bottom;
  bottom: 2px;
  display: none;
  font-size: 0;
  height: 10px;
  line-height: 0;
  position: absolute;
  right: 1px;
  width: 10px;
  z-index: 99;
}

.sys_spec_text li.selected a {
  border: 1px solid #4a5b79;
  padding: 0 0px;
}

.sys_spec_text li.selected .check {
  display: block;
}

.sys_spec_text li img {
  border: 0px solid #fff;
  margin-top: -2px;
  padding-right: 5px;
  vertical-align: middle;
}

.sys_spec_text a.disabled {
  color: #a9a6a6;
  cursor: not-allowed;
  display: block;
  overflow: hidden;
}

.selected {
  background-color: #ddd;
}
li {
  list-style: none;
}
</style>
